<template>
  <view class="warp" :style="themeStyleVar">
    <view :style="{'padding-top':`${navBarConf.titleBarHeight + navBarConf.statusBarHeight}px`}">
      <view class="content">

        <view v-if="visibleResultInfo" class="result-info martb">
          <view class="result-info__title martb">您的标准体重（SBW）</view>
          <view class="result-info__content martb">{{ resultInfo.weight }}公斤</view>
          <view class="result-info__title">您超重（体重较标准体重轻时为负值）</view>
          <view class="result-info__content martb">{{ resultInfo.overweight }}</view>
          <view class="result-info__title martb">属于</view>
          <view class="result-info__content martb">{{ resultInfo.result }}</view>
        </view>

        <view class="content-item martb">
          <view class="flex-box martb">
            <view>性别:</view>
            <radio-group class="radio-group space-between" @change="changeGender">
              <label v-for="(item) in genderRadios" :key="item.value" class="radio-group__item">
                <radio class="radio" color="var(--global-color-100)" :value="item.value" :checked="item.value === param.gender" />
                <view>{{ item.text }}</view>
              </label>
            </radio-group>
            <view class="v-hide">CM（厘米）</view>
          </view>
        </view>
        <view class="content-item martb">
          <view class="flex-box martb">
            <view>身高:</view>
            <input v-model="param.height" type="digit" maxlength="8" class="tag-input" cursor-spacing="24px" placeholder="请输入您的身高" @input="replaceInput($event, 'height')">
            <view>CM（厘米）</view>
          </view>
        </view>
        <view class="content-item martb">
          <view class="flex-box martb">
            <view>体重:</view>
            <input v-model="param.weight" type="digit" maxlength="8" class="tag-input" cursor-spacing="24px" placeholder="请输入您的体重" @input="replaceInput($event, 'weight')">
            <view>KG（公斤）</view>
          </view>
        </view>

        <view class="btns">
          <view class="btn-item martb" @click="calculation">计算标准体重</view>
        </view>
        <p class="tips martb">标准体重是反映和衡量一个人健康状况的重要标志之一。过胖和过瘦都不利于健康，也不会给人以健美感。不同体型的大量统计材料表明，反映正常体重较理想和简单的指标，可用身高体重的关系来表示。</p>
        <p class="tips martb">标准体重计算器可以根据您的性别/身高/体重等信息计算您应该达到的标准体重。因个体的差异，结果仅供参考。</p>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      $consts: this.$consts,
      visibleResultInfo: false, // 是否展示信息
      param: {
        gender: this.$consts.GENDER.MAN, // 性别
        height: '', // 身高
        weight: '' // 体重
      },
      genderRadios: [{ // 性别选择
        value: this.$consts.GENDER.MAN,
        text: '男'
      }, {
        value: this.$consts.GENDER.WOMAN,
        text: '女'
      }],
      resultInfo: { // 计算结果
        weight: '', // 标准体重
        overweight: '', // 超重
        result: '', // 结论
        tips: '' // 温馨提示
      }
    }
  },
  onLoad(option) {
      // #ifdef MP-WEIXIN
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
      // #endif
  },
  // #ifdef MP-WEIXIN
  onShareAppMessage(res) {
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: '给您分享个体重计算',
        path: '/pages/tools/standardweight'
      }
  },
  // #endif
  computed: {
    navBarConf() { return this.$store.getters.getNavBarConf }, // 获取设备头部安全区和标题高度
    themeStyleVar() { return this.$store.getters.getThemeStyleVar } // 当前主题色卡变量
  },
  methods: {
    // 选择性别
    changeGender(e) { this.param.gender = +e.target.value },
    // 格式化数字
    replaceInput(event, key) {
      const value = event.target.value
      const replaceValue = value.replace(/[^0-9.]+/g, '')
      if (event.detail.value !== replaceValue) {
        // 修改当前value
        event.detail.value = replaceValue
        setTimeout(() => {
          this.param[key] = replaceValue
        }, 10)
      }
    },
    // 计算标准体重
    calculation() {
      const gender = this.param.gender
      const height = this.param.height
      const weight = this.param.weight

      if (!height) {
        return uni.showToast({
          title: '请输入您的身高',
          icon: 'none'
        })
      }

      if (!weight) {
        return uni.showToast({
          title: '请输入您的体重',
          icon: 'none'
        })
      }

      // 标准体重
      if (gender === this.$consts.GENDER.MAN) {
        this.resultInfo.weight = parseFloat((height - 80) * 0.7).toFixed(2)
      } else {
        this.resultInfo.weight = parseFloat((height - 70) * 0.6).toFixed(2)
      }

      // 超重
      const overweight = parseFloat((weight - this.resultInfo.weight) / this.resultInfo.weight * 100).toFixed(2)
      this.resultInfo.overweight = `${overweight} %`

      // 结论、温馨提示
      if (overweight < 10 && overweight > -10) {
        this.resultInfo.result = '正常体重'
      }
      if ((overweight >= 10 && overweight < 20) || (overweight <= -10 && overweight > -20)) {
        this.resultInfo.result = `${overweight >= 10 ? '体重过重' : '体重过轻'}`
      }
      if (overweight >= 20 || overweight <= -20) {
        this.resultInfo.result = `${overweight >= 20 ? '肥胖' : '体重不足'}`
      }

      this.visibleResultInfo = true

      // 滚动到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    }
  }
}
</script>

<style lang="scss" scoped>

  .warp {
    min-height: 100vh;
    background-color: #FFF;
  }

  .content {
    @include flex-center();
    flex-flow: column;
    padding: 24rpx;
    box-sizing: border-box;
    font-size: $uni-font-size-base;
    border-top: 20rpx solid #F7F7F7;

    .content-item {
      width: 100%;
      background-color: #FFF;
      border-radius: 16rpx;
      padding: 0 24rpx;
      box-sizing: border-box;

      .flex-box {
        display: flex;
        align-items: center;
        flex: 1 auto 1;

        .radio-group {
          display: flex;
          justify-content: flex-start;

          &__item {
            display: flex;
            align-items: center;
            margin-left: 42rpx;

            .radio {
              transform: scale(0.75);
            }
          }
        }

        .tag-input {
          margin: 0 auto;
          padding: 8rpx 20rpx;
          border-radius: 8rpx;
          font-size: 28rpx;
          line-height: 28rpx;
          color: $uni-color-title;
          border: 1px solid var(--global-color-100);
          background-color: #FCFCFC;
        }

      }

    }

    .space-between {
      justify-content: space-between;
    }
  }

  .result-info {
    width: calc(100% - 40rpx);
    height: auto;
    color: $uni-color-title;
    padding: 24rpx;
    box-sizing: border-box;
    border: 2rpx dashed var(--global-color-200);
    background-color: var(--global-color-400);

    &__title {
      color: $uni-color-title;
      font-size: $uni-font-size-base;
      text-align: center;
    }

    &__content {
      color: #333;
      font-size: 42rpx;
      text-align: center;
    }

  }

  .btns {
    @include flex-center();
    flex-flow: column;
    margin-top: 24rpx;
    width: 100%;

    .btn-item {
      @include flex-center();
      width: 86%;
      height: 80rpx;
      color: #FFF;
      border-radius: 16rpx;
      background-color: var(--global-color-100);
    }
  }

  .tips {
    padding: 0 20rpx;
    box-sizing: border-box;
    line-height: 36rpx;
    font-size: $uni-font-size-sm;
    color: #888;
  }

  .martb {
    margin: 20rpx 0;
  }
</style>
